<template>
<div>
	<el-row>
  	<el-button type="primary" @click="create('template')" >添加模版</el-button>
  	<el-button @click="create('group')">添加分组</el-button>
	</el-row>

	<!-- 新建模版 -->
	<el-dialog title="添加模版" :visible.sync="templateFormVisible" center width="40%">
	  <el-form :model="form" :rules="tempRules">
	    <el-form-item label="中文名" :label-width="formLabelWidth" prop="ch_name">
	      <el-input v-model="form.ch_name"></el-input>
	    </el-form-item>
	    <el-form-item label="英文名" :label-width="formLabelWidth" prop="en_name">
	      <el-input v-model="form.en_name"></el-input>
	    </el-form-item>
	    <el-form-item label="分组" :label-width="formLabelWidth">
	      <el-select v-model="form.group" placeholder="所属分组">
	        <el-option :label="group.ch_name" :value="group.id" :key="index" v-for="(group,index) in groups"></el-option>
	      </el-select>
	    </el-form-item>
	    <el-form-item label="启用" :label-width="formLabelWidth">
	      <el-switch v-model="form.enabled">
	      </el-switch>
	    </el-form-item>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="templateFormVisible = false">取 消</el-button>
	    <el-button type="primary" @click="saveTemp">确 定</el-button>
	  </div>
	</el-dialog>

	<!-- 新建分组 -->
	<el-dialog :title="action_group+'分组'" :visible.sync="groupFormVisible" center width="40%">
	  <el-form :model="form" :rules="tempRules">
	    <el-form-item label="中文名" :label-width="formLabelWidth" prop="ch_name">
	      <el-input v-model="form.ch_name"></el-input>
	    </el-form-item>
	    <el-form-item label="英文名" :label-width="formLabelWidth" prop="en_name">
	      <el-input v-model="form.en_name"></el-input>
	    </el-form-item>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="groupFormVisible = false">取 消</el-button>
	    <el-button type="primary" @click="saveGroup">确 定</el-button>
	  </div>
	</el-dialog>

	<el-row :gutter="12" style="margin-top: 20px;" v-for="(group,index) in groups" :key="index">
		<el-col>
			<div class="group_type" @mouseenter="enter(index)" @mouseleave="leave(index)">
				<span>{{group.ch_name}} ({{group.templates}})</span>
        <span hidden="hidden" ref="editbtn" >
          <span class="editbtn" @click="editGroup(group)"><i class="fa fa-edit"></i></span>
          <span class="editbtn" @click="beforeDelGroup(group)"><i class="fa fa-trash"></i></span>
        </span>
			</div>
		</el-col>
	
		<el-col :span="8" v-for="(temp,index) in templates" :key="index" v-if="group.id == temp.group.id">
			<el-card class="box-card">
			  <div class="text item" @click="detail(temp.id)">
			    <el-row>
			    	<el-col :span="4">
			    		<i :class="i_class"></i>
			    	</el-col>
			    	<el-col :span="14">
			    		<div>{{temp.ch_name}}</div>
			    		<div style="color: #7a838f;">{{temp.en_name}}</div>
			    	</el-col>
			    	<el-col :span="6" style="margin-top: 3%;">
			    		<el-switch
							  v-model="temp.enabled"
							  onClick="event.cancelBubble = true"
							  @click.native="changStatus(temp)">
							</el-switch>
							<el-button type="danger" size="mini" onClick="event.cancelBubble = true" @click="beforeDelTemp(temp)">删除</el-button>
			    	</el-col>
			    </el-row>
			  </div>
			</el-card>
		</el-col>
	
	</el-row>
</div>
</template>
<script>
import {postAPItokenResponse,deleteAPItoken,putAPItokenResponse,patchAPItoken} from '@/utils/api'
export default {
	props: {
		groups: Array,
		templates: Array,
		i_class: String
	},
	data () {
		return {
			action_group: '添加',
			form: {},
			templateFormVisible: false,
			groupFormVisible: false,
			formLabelWidth: '70px',
			tempRules: {
				ch_name: [
					{required: true, message: '请输入中文名', trigger: 'blur'},
					{ min: 2, max: 15, message: '2到15个中文汉字', trigger: 'blur' }
				],
				en_name: [
					{required: true, message: '请输入英文名', trigger: 'blur'},
					{ min: 2, max: 15, message: '2到15个英文字符', trigger: 'blur' }
				]
			}
		}
	},
	methods: {
		create (type) {
			if (type == 'group') {
				this.action_group = '添加'
				this.groupFormVisible = true
			} else {
				this.action_template = '添加'
				this.templateFormVisible = true
			}
		},
		saveGroup () {
			this.groupFormVisible = false
			this.form['type']=this.groups[0]['type']
			if (this.action_group == '添加'){
				var promise = postAPItokenResponse(API.sysGroup,this.form,this.$store.state.user.token)
			} else {
				var promise = putAPItokenResponse(API.sysGroup+this.form.id+'/',this.form,this.$store.state.user.token)
			}
			promise.then((res)=>{
				console.log(res)
				if(res.status==200 || res.status == 201){
					this.$parent.getGroups()
					this.$notify({
	          type: 'success',
	          message: this.action_group+'成功!'
	        })
				} else {
					this.$notify({
	          type: 'error',
	          message: this.action_group+'失败!'
	        })
				}
			})
		},
		saveTemp () {
			this.templateFormVisible = false
			var promise = postAPItokenResponse(API.sysTemp,this.form,this.$store.state.user.token)
			promise.then((res)=>{
				if(res.status==200 || res.status == 201){
					this.$parent.getTemplates()
					this.$notify({
	          type: 'success',
	          message: this.action_group+'成功!'
	        })
				} else {
					this.$notify({
	          type: 'error',
	          message: this.action_group+'失败!'
	        })
				}
			})
		},
		detail (temp_id) {
			if(this.templates[0]['group']['type'] == '项目'){
				this.$router.push({name: 'proTempDetail',query:{id: temp_id}})
			}else{
				this.$router.push({name: 'empTempDetail',query:{id: temp_id}})
			}
		},
		enter(index){
      this.$refs.editbtn[index].style.display = 'inline-block';
    },
    leave(index){
      this.$refs.editbtn[index].style.display = 'none';
    },
    editGroup(group){
    	this.form = group
    	this.action_group = '编辑'
      this.groupFormVisible = true
    },
    beforeDelGroup(group){
      this.$confirm('删除分组:'+group.ch_name+', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      	this.executeDelGroup(group.id)
      }).catch(() => {})
    },
    executeDelGroup(id){
      const promise = deleteAPItoken(API.sysGroup+id+'/',this.$store.state.user.token)
      promise.then((res)=>{
      	if(res.status == 204){
      		this.$notify({
	          type: 'success',
	          message: '删除成功!'
	        })
      		this.$parent.getGroups()
      	}else{
      		this.$notify({
	          type: 'error',
	          message: '删除失败!,'+res.data
	        })
      	}
      })
    },
    beforeDelTemp(temp){
      this.$confirm('删除模版:'+temp.ch_name+', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      	this.executeDelTemp(temp.id)
      }).catch(() => {})
    },
    executeDelTemp(id){
      const promise = deleteAPItoken(API.sysTemp+id+'/',this.$store.state.user.token)
      promise.then((res)=>{
      	if(res.status == 204){
      		this.$notify({
	          type: 'success',
	          message: '删除成功!'
	        })
      		this.$parent.getGroups()
      		this.$parent.getTemplates()
      	}else{
      		this.$notify({
	          type: 'error',
	          message: '删除失败!,'+res.data
	        })
      	}
      })
    },
    changStatus (temp) {
    	var promise = patchAPItoken(API.sysTemp+temp.id+'/',{'enabled':temp.enabled},this.$store.state.user.token)
    	promise.then(res=>{
    		if(res.status == 200){
    			this.$notify({
	          type: 'success',
	          message: '启用成功!'
	        })
    		}else{
    			this.$notify({
	          type: 'error',
	          message: '启用失败!,'+res.data
	        })
    		}
    	})
    }
	}
}
</script>
<style scoped>
.group_type{
  padding: 0 40px 0 8px;
  border-left: 4px solid #c3cdd7;
  line-height: 14px;
  font-size:18px;
  color:#737987;
  margin-bottom: 15px;
}

.el-button--mini, .el-button--mini.is-round {
  padding: 3px 10px;
}

.el-select {
	width: 100%;
}

.el-card {
	cursor: pointer;
}
</style>